<template>
	<div class='system-dept-container'>
		<el-card shadow='hover'>
			<div class='system-dept-search mb15'>
				<el-button v-auth="'/system-admin/sys-dept/add'" size='default' type='success' class='ml10' @click='onOpenAddDept'>
					<el-icon>
						<ele-FolderAdd />
					</el-icon>
					新增部门
				</el-button>
			</div>
			<el-table
				:data='tableData.data'
				style='width: 100%'
				row-key='id'
				default-expand-all
				:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
			>
				<el-table-column prop='name' label='部门名称' show-overflow-tooltip></el-table-column>
				<el-table-column prop='describes' label='部门描述' show-overflow-tooltip></el-table-column>
				<el-table-column prop='person' label='负责人' show-overflow-tooltip></el-table-column>
				<el-table-column prop='phone' label='手机号' show-overflow-tooltip></el-table-column>
				<el-table-column prop='creationTime' label='创建时间' show-overflow-tooltip></el-table-column>
				<el-table-column label='排序' show-overflow-tooltip width='80'>
					<template #default='scope'>
						{{ scope.$index }}
					</template>
				</el-table-column>
				<el-table-column prop='status' label='部门状态' show-overflow-tooltip>
					<template #default='scope'>
						<el-tag type='success' v-if='scope.row.status'>启用</el-tag>
						<el-tag type='info' v-else>禁用</el-tag>
					</template>
				</el-table-column>
				<el-table-column label='操作' show-overflow-tooltip width='140'>
					<template #default='scope'>
						<el-button v-auth="'/system-admin/sys-dept/add'" size='small' type='text' @click='onOpenAddDeptValue(scope.row)'>新增
						</el-button>
						<el-button v-auth="'/system-admin/sys-dept/edit'" size='small' type='text' @click='onOpenEditDept(scope.row)'>修改
						</el-button>
						<el-button v-auth="'/system-admin/sys-dept/del'" size='small' type='text' @click='onTabelRowDel(scope.row)'>删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<AddDept ref='addDeptRef' />
		<EditDept ref='editDeptRef' />
	</div>
</template>

<script lang='ts'>
import { ref, toRefs, reactive, onMounted, defineComponent } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import AddDept from '/@/views/system/dept/component/addDept.vue';
import EditDept from '/@/views/system/dept/component/editDept.vue';
import { useDeptApi } from '/@/api/dept';

interface TableDataState {
	tableData: {
		data: Array<GetDataRow>;
	};
}

export default defineComponent({
	name: 'systemDept',
	components: { AddDept, EditDept },
	setup() {
		const addDeptRef = ref();
		const editDeptRef = ref();
		const state = reactive<TableDataState>({
			tableData: {
				data: [],
			},
		});
		// 初始化表格数据
		const initTableData = async () => {
			state.tableData.data = await useDeptApi().getTree() as any;
		};
		// 打开新增菜单弹窗
		const onOpenAddDept = () => {
			addDeptRef.value.openDialog();
		};
		// 打开新增菜单弹窗
		const onOpenAddDeptValue = (row: GetDataRow) => {
			addDeptRef.value.openDialogValue(row);
		};
		// 打开编辑菜单弹窗
		const onOpenEditDept = (row: GetDataRow) => {
			editDeptRef.value.openDialog(row);
		};
		// 删除当前行
		const onTabelRowDel = (row: GetDataRow) => {
			ElMessageBox.confirm(`此操作将永久删除部门：${row.name}, 是否继续?`, '提示', {
				confirmButtonText: '删除',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(async () => {
					const inputData = {
						id: [row.id],
					};
					await useDeptApi().del(inputData);
					ElMessage.success('删除成功');
				})
				.catch(() => {
				});
		};
		// 页面加载时
		onMounted(() => {
			initTableData();
		});
		return {
			addDeptRef,
			editDeptRef,
			onOpenAddDept,
			onOpenAddDeptValue,
			onOpenEditDept,
			onTabelRowDel,
			...toRefs(state),
		};
	},
});
</script>
